<template>
    <div class="menu-wrap">
        <div class="left">
            <ul>
                <li v-for="item in navList" :key="item.id" @click="change(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <div class="right">
            <product v-for="item in rightList" :key="item.id"
                :title="item.title"
                :price="item.price"
                :id="item.id"
                :num="item.num"
                @open="openFun"
            ></product>
        </div>  
        <el-dialog v-show="status" @close="status=false" @count="countFun" :obj="curObj"></el-dialog>
    </div>
</template>
<script>
import product from '../../components/product'
import elDialog from '../../components/dialog'
export default {
    data(){
        return {
            navList:[],     //左边的菜单
            rightList:[],   //右边显示数据
            status:false,   //弹窗显示隐藏
            curObj:{},
            buyList:[]      //购买的数组      
        }
    },
    created(){
        this.$http.get('/api/nav').then(res => {
            if(res.data.code === 1){
                this.navList = res.data.data;
                let type = res.data.data[0].id;
                this.getData(type)
            }
        })
    },
    methods:{
        getData(type){
            this.buyList = JSON.parse(window.localStorage.getItem('buyList')) || [];
            this.$http.get(`/api/product?type=${type}`).then(res => {
                if(res.data.code === 1){
                    this.rightList = res.data.data.map(item => {
                        item.num = 0;
                        this.buyList.forEach(bItem => {
                            if(bItem.id === item.id){
                                item.num = bItem.num
                            }
                        })
                        return item
                    })
                }
            })
        },
        change(id){
            this.getData(id);
        },
        openFun(id){
            this.status = true;
            this.curObj = this.rightList.find(item => item.id === id);
        },
        countFun(num,id){
            let target = this.rightList.find(item => item.id === id);
            target.num = num;

            let buyInd = this.buyList.findIndex(item => item.id === id);

            //已经购买过
            if(buyInd!=-1){
                this.buyList[buyInd].num = num;
            }else{
                this.buyList.push(target);
            }
            //未购买过
            console.log(this.buyList);
            window.localStorage.setItem('buyList',JSON.stringify(this.buyList));
        }
    },
    components:{
        product,
        elDialog
    }
}
</script>
<style lang="scss">
    .menu-wrap{
        width:100%;
        height:100%;
        display: flex;
        .left{
            width:80px;
            height:100%;
            border-right:1px solid gray;
            li{
                width:100%;
                height: 44px;
                border-bottom:1px solid gray;
                line-height: 44px;
                text-align: center;
            }
        }
        .right{
            flex:1;
            height:100%;
        }
    }
</style>
